<div class="infinite-cards row">
  <div class="col-md-12 col-lg-6 col-xxxl-6">
    <nb-card class="own-scroll">
      <nb-card-header>Own Scroll</nb-card-header>
      <nb-list
        nbInfiniteList
        [threshold]="500"
        (bottomThreshold)="loadNext(firstCard)">
        <nb-list-item *ngFor="let newsPost of firstCard.news">
          <ngx-news-post [post]="newsPost"></ngx-news-post>
        </nb-list-item>
        <nb-list-item *ngFor="let _ of firstCard.placeholders">
          <ngx-news-post-placeholder></ngx-news-post-placeholder>
        </nb-list-item>
      </nb-list>
    </nb-card>
  </div>

  <div class="col-md-12 col-lg-6 col-xxxl-6">
    <nb-card>
      <nb-card-header>Window Scroll</nb-card-header>
      <nb-list
        nbInfiniteList
        listenWindowScroll
        [threshold]="500"
        (bottomThreshold)="loadNext(secondCard)">
        <nb-list-item *ngFor="let newsPost of secondCard.news">
          <ngx-news-post [post]="newsPost"></ngx-news-post>
        </nb-list-item>
        <nb-list-item *ngFor="let _ of secondCard.placeholders">
          <ngx-news-post-placeholder></ngx-news-post-placeholder>
        </nb-list-item>
      </nb-list>
    </nb-card>
  </div>
</div>
